<template>
 <div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between">
   <a-form
       layout="inline"
       :model="queryFrom"
   >
     <a-form-item>
       <a-input v-model:value="queryFrom.search" placeholder="菜单名称"/>
     </a-form-item>

     <a-form-item>
       <a-button type="primary" >搜索</a-button>
     </a-form-item>
     <a-form-item>
       <a-button>重置</a-button>
     </a-form-item>
   </a-form>
   <a-button v-auth="['sys:menu:add']" type="primary" @click="show=true">新增</a-button>
 </div>
  <a-table :columns="columns"
           :data-source="dataList"
           :row-selection="rowSelection"
           :pagination="false"
           rowKey="menuId"

  >
    <template #bodyCell="{ column, record }">
     <template v-if="column.dataIndex!=='operation'">
       <span v-if="column.dataIndex!=='icon'&&column.dataIndex!=='type'">
         {{record[column.dataIndex]}}
       </span>
       <my-icon v-else :name="record[column.dataIndex]"
       width="1.2rem"
       height="1.2rem"
       ></my-icon>
      <div v-if="column.dataIndex==='type'">
        <a-tag  v-if="record[column.dataIndex]==0" color="success">目录</a-tag>
        <a-tag  v-if="record[column.dataIndex]==1" color="processing">菜单</a-tag>
        <a-tag  v-if="record[column.dataIndex]==2" color="purple">按钮</a-tag>
      </div>
     </template>
      <template v-else v-auth="['sys:menu:edit','sys:menu:delete']">
        <div style="display: flex;width: 100%;justify-content: center;align-items: center">
          <div v-auth="['sys:menu:edit']">
            <a-button type="link" size="small" @click="openModel(record)">编辑</a-button>
          </div>
          <div  v-auth="['sys:menu:delete']">
            <a-popconfirm
                title="确定删除吗"
                @confirm="remove(record)"
                ok-text="确定"
                cancel-text="取消"
            >
              <a-button danger type="link" size="small">删除</a-button>
            </a-popconfirm>

          </div>
        </div>


      </template>

    </template>
  </a-table>
  <add-or-update v-model="show" :menu="menu" @success="success"/>
</template>
<script setup lang="ts">
import {onMounted, ref, defineComponent} from "vue";
import {message} from "ant-design-vue";
import {queryMenuList,delMenu} from '@/api/sys-setting/menu.ts'
import {treeDataTranslate} from '@/utils'
import AddOrUpdate from "@/views/sys/menu/add-or-update.vue";
import MyIcon from '@/components/my-icon/index.vue'
import {Menu} from "@/types/global.ts";
import {useSystemStore} from "@/stroe";
import { useRouter} from "vue-router";
defineComponent({
  AddOrUpdate,MyIcon
})
const systemStore =useSystemStore();
const router = useRouter();
const generateQueryFrom = ()=>{
  return{
    search:'',
    pageNo:1,
    pageSize:10
  }
}

const generateMenu = ():Menu=>{
  return{
    name:'',
    permission: '',
    path: '',
    parentId:   0,
    parentName: null,
    icon:'',
    sortOrder:  0,
    type:0,

  }
}
const queryFrom = ref(generateQueryFrom())


const dataList = ref([])
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name',
    align:'center'
  },
  {
    title: '菜单类型',
    dataIndex: 'type',
    key: 'type',
    align:'center'
  },
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon',
    align:'center'
  },
  {
    title: '菜单路径',
    dataIndex: 'path',
    key: 'path',
    align:'center'
  },
  {
    title: '授权标识',
    dataIndex: 'permission',
    key: 'permission',
    align:'center'
  },
  {
    title: '序号',
    dataIndex: 'sortOrder',
    key: 'sortOrder',
    align:'center'
  },
  {
    title: '操作',
    dataIndex:'operation',
    key: 'operation',
    align:'center'
  }
];

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
  children?: DataItem[];
}
const show = ref(false)
const menu = ref(generateMenu());
const getQueryMenuList = ()=>{
  queryMenuList(queryFrom.value).then((res:any)=>{
    dataList.value = treeDataTranslate(res.result,'menuId')
  })
}
const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});
const openModel = (row:any)=>{
  console.log(row)
  menu.value ={...row};
  show.value =true;
}
const success =()=>{
  message.success('操作成功');
  show.value = false;
  getQueryMenuList();
}
const remove = (row:Menu)=>{
  if(row.children&&row.children.length>0){
    message.warn('请先删除下级菜单');
    return;
  }

  delMenu({id:row.menuId}).then((res:any)=>{
    if(res&&res.code===200){
      message.success("操作成功");
      systemStore.refreshMenu(router)
    }
  })
}
onMounted(()=>{
  getQueryMenuList();
})
</script>
<style scoped lang="scss">
.icon-svg {
  vertical-align: -0.15em;
  fill: #131415;
  overflow: hidden;
}
</style>
